<template>
  <view class="page">
    <view class="header">
      <text class="title">病历查看</text>
      <view class="actions">
        <button class="icon-btn" @tap.stop="toggleSearch">
          <text class="icon">🔍</text>
        </button>
        <button class="icon-btn" @tap.stop="toggleMenu">
          <text class="icon">⋮</text>
        </button>
      </view>
    </view>

    <!-- 快速定位面板（替换原搜索） -->
    <view class="search-panel" v-show="showSearch">
      <view class="quick-grid">
        <view class="q-item" @tap="scrollTo('doc-home')">病案首页</view>
        <view class="q-item" @tap="scrollTo('doc-admission')">入院记录</view>
        <view class="q-item" @tap="scrollTo('doc-discharge')">出院记录</view>
        <view class="q-item" @tap="scrollTo('doc-course')">病程记录</view>
        <view class="q-item" @tap="scrollTo('doc-surgery')">手术记录</view>
        <view class="q-item" @tap="scrollTo('doc-consent')">同意书</view>
        <view class="q-item" @tap="scrollTo('doc-vitals')">体温单</view>
        <view class="q-item" @tap="scrollTo('doc-reports')">检查检验</view>
        <view class="q-item" @tap="openSheet">打开详情</view>
        <view class="q-item danger" @tap="closeSearch">关闭</view>
      </view>
    </view>

    <!-- 更多菜单 -->
    <view class="menu-pop" v-show="showMenu">
      <view class="m-item" @tap="copyPatient">复制患者信息</view>
      <view class="m-item" @tap="openSheet">打开详情抽屉</view>
      <view class="m-item" @tap="openAllDocs">展开全部文书</view>
      <view class="m-item" @tap="closeAllDocs">收起全部文书</view>
      <view class="m-item" @tap="toggleMenu">关闭</view>
    </view>

    <view class="card patient-card">
      <view class="avatar">王</view>
      <view class="p-info">
        <view class="row">
          <text class="p-name">王小明</text>
          <view class="pill"><view class="dot" />在院观察</view>
        </view>
        <text class="p-sub">男 · 32岁 · 门诊号 008132 · A 型</text>
        <view class="tags">
          <text class="tag">对青霉素过敏</text>
          <text class="tag">既往：鼻炎</text>
          <text class="tag">BMI 22.1</text>
        </view>
      </view>
      <button class="btn-primary" @tap="openSheet">查看详情</button>
    </view>

    <view class="grid">
      <view class="card">
        <text class="mini-title">生命体征</text>
        <view class="kv">
          <text class="k">体温</text><text class="v">36.8℃</text>
          <text class="k">心率</text><text class="v">74 bpm</text>
          <text class="k">血压</text><text class="v">118/76 mmHg</text>
          <text class="k">血氧</text><text class="v">98%</text>
        </view>
      </view>
      <view class="card">
        <text class="mini-title">初步诊断</text>
        <view class="kv">
          <text class="k">主诉</text><text class="v">咽痛、低热 2 天</text>
          <text class="k">诊断</text><text class="v">急性上呼吸道感染</text>
          <text class="k">分级</text><text class="v warn">轻度</text>
          <text class="k">风险</text><text class="v">低</text>
        </view>
      </view>
    </view>

    <view class="card">
      <text class="mini-title">当前用药</text>
      <view class="list">
        <view class="list-item" id="doc-home">
          <view>
            <text class="li-title">布洛芬缓释胶囊 0.3g</text>
            <text class="li-sub">口服 · q8h · 共 3 天</text>
          </view>
          <button class="btn-outline" @tap="openSheet">详情</button>
        </view>
        <view class="list-item" id="doc-admission">
          <view>
            <text class="li-title">咽炎含片</text>
            <text class="li-sub">含服 · prn · 疼痛时使用</text>
          </view>
          <button class="btn-outline" @tap="openSheet">详情</button>
        </view>
      </view>
    </view>

    <view class="card" style="margin-top: 12px;">
      <text class="mini-title">文书查看</text>
      <view class="list">
        <view class="list-item" id="doc-discharge">
          <view>
            <text class="li-title">病案首页</text>
            <text class="li-sub">基本信息、诊断、住院信息、费用摘要</text>
          </view>
          <button class="btn-outline" @tap="openDoc('home')">{{ expandedDoc==='home' ? '收起' : '查看' }}</button>
        </view>
        <view v-if="expandedDoc==='home'" class="doc-detail">
          <text class="mini-title">基本信息</text>
          <view class="kv">
            <text class="k">姓名</text><text class="v">王小明</text>
            <text class="k">性别/年龄</text><text class="v">男/32岁</text>
            <text class="k">住院号</text><text class="v">H20250912031</text>
            <text class="k">婚姻/职业</text><text class="v">已婚/产品经理</text>
            <text class="k">联系方式</text><text class="v">138****0068</text>
            <text class="k">联系人/电话</text><text class="v">王女士/139****7788</text>
            <text class="k">地址</text><text class="v">上海市浦东新区瑞庆路 88 号</text>
          </view>
          <text class="mini-title">诊断</text>
          <view class="kv">
            <text class="k">入院诊断</text><text class="v">急性上呼吸道感染</text>
            <text class="k">出院诊断</text><text class="v">同入院</text>
            <text class="k">并发症</text><text class="v">无</text>
          </view>
          <text class="mini-title">住院信息</text>
          <view class="kv">
            <text class="k">入院日期</text><text class="v">2025-09-10</text>
            <text class="k">出院日期</text><text class="v">2025-09-13</text>
            <text class="k">科室/病区</text><text class="v">呼吸内科/三病区</text>
            <text class="k">床位</text><text class="v">12-08</text>
            <text class="k">医保类型</text><text class="v">城职医保</text>
          </view>
          <text class="mini-title">费用摘要</text>
          <view class="kv">
            <text class="k">总费用</text><text class="v">¥ 2,380.00</text>
            <text class="k">药品费</text><text class="v">¥ 630.00</text>
            <text class="k">检验检查</text><text class="v">¥ 420.00</text>
            <text class="k">治疗护理</text><text class="v">¥ 380.00</text>
            <text class="k">床位费</text><text class="v">¥ 240.00</text>
            <text class="k">医保报销</text><text class="v">70%</text>
            <text class="k">个人支付</text><text class="v">¥ 714.00</text>
          </view>
        </view>
        <view class="list-item" id="doc-course">
          <view>
            <text class="li-title">入院记录</text>
            <text class="li-sub">入院原因、体格检查、初步诊断、处理</text>
          </view>
          <button class="btn-outline" @tap="openDoc('admission')">{{ expandedDoc==='admission' ? '收起' : '查看' }}</button>
        </view>
        <view v-if="expandedDoc==='admission'" class="doc-detail">
          <text class="mini-title">入院原因</text>
          <text class="paragraph">发热低热伴咽痛2天，自服药后缓解不明显，夜间咳嗽为主。</text>
          <text class="mini-title">既往史</text>
          <text class="paragraph">儿童期有轻度哮喘史，近5年未发作；青霉素过敏；无外伤手术史。</text>
          <text class="mini-title">体格检查</text>
          <view class="kv">
            <text class="k">T</text><text class="v">36.8℃</text>
            <text class="k">P</text><text class="v">74 次/分</text>
            <text class="k">R</text><text class="v">18 次/分</text>
            <text class="k">BP</text><text class="v">118/76 mmHg</text>
            <text class="k">咽部</text><text class="v">轻度充血，扁桃体 I°</text>
            <text class="k">肺部</text><text class="v">双肺呼吸音清，未闻及干湿啰音</text>
          </view>
          <text class="mini-title">初步诊断与处理</text>
          <text class="paragraph">考虑上呼吸道感染，给予对症治疗（布洛芬、含服含片）与多饮水、休息。</text>
        </view>
        <view class="list-item" id="doc-surgery">
          <view>
            <text class="li-title">出院记录</text>
            <text class="li-sub">出院诊断、住院经过、医嘱与随访</text>
          </view>
          <button class="btn-outline" @tap="openDoc('discharge')">{{ expandedDoc==='discharge' ? '收起' : '查看' }}</button>
        </view>
        <view v-if="expandedDoc==='discharge'" class="doc-detail">
          <text class="mini-title">出院诊断</text>
          <text class="paragraph">急性上呼吸道感染；恢复良好。</text>
          <text class="mini-title">住院经过</text>
          <text class="paragraph">入院后予以对症治疗和观察，体温逐日下降并稳定，咽痛逐步缓解，无并发症出现。</text>
          <text class="mini-title">出院医嘱</text>
          <text class="paragraph">多饮水、休息、保暖；规律作息，避免辛辣刺激；复诊时间：一周后。</text>
        </view>
        <view class="list-item" id="doc-consent">
          <view>
            <text class="li-title">病程记录</text>
            <text class="li-sub">首程、日常病程、小结、转科记录</text>
          </view>
          <button class="btn-outline" @tap="openDoc('course')">{{ expandedDoc==='course' ? '收起' : '查看' }}</button>
        </view>
        <view v-if="expandedDoc==='course'" class="doc-detail">
          <view class="list">
            <view class="list-item"><view><text class="li-title">首程记录</text><text class="li-sub">2025-09-10 09:30 · 体征平稳，考虑URTI</text></view></view>
            <view class="list-item"><view><text class="li-title">日常病程</text><text class="li-sub">2025-09-11 10:00 · 症状缓解，体温正常</text></view></view>
            <view class="list-item"><view><text class="li-title">阶段小结</text><text class="li-sub">2025-09-12 09:00 · 拟出院随访</text></view></view>
          </view>
        </view>
        <view class="list-item" id="doc-vitals">
          <view>
            <text class="li-title">手术记录</text>
            <text class="li-sub">术式、麻醉、时长、术中/术后</text>
          </view>
          <button class="btn-outline" @tap="openDoc('surgery')">{{ expandedDoc==='surgery' ? '收起' : '查看' }}</button>
        </view>
        <view v-if="expandedDoc==='surgery'" class="doc-detail">
          <text class="paragraph">本次住院未进行手术操作。</text>
        </view>
        <view class="list-item" id="doc-reports">
          <view>
            <text class="li-title">知情同意书</text>
            <text class="li-sub">签署项、签署人、时间、附件</text>
          </view>
          <button class="btn-outline" @tap="openDoc('consent')">{{ expandedDoc==='consent' ? '收起' : '查看' }}</button>
        </view>
        <view v-if="expandedDoc==='consent'" class="doc-detail">
          <view class="list">
            <view class="list-item"><view><text class="li-title">治疗同意书</text><text class="li-sub">患者签名：王小明 · 2025-09-10</text></view></view>
            <view class="list-item"><view><text class="li-title">隐私授权</text><text class="li-sub">授权共享检验结果 · 2025-09-10</text></view></view>
          </view>
        </view>
        <view class="list-item">
          <view>
            <text class="li-title">体温单</text>
            <text class="li-sub">体温/脉搏/呼吸/血压曲线</text>
          </view>
          <button class="btn-outline" @tap="openDoc('vitals')">{{ expandedDoc==='vitals' ? '收起' : '查看' }}</button>
        </view>
        <view v-if="expandedDoc==='vitals'" class="doc-detail">
          <text class="mini-title">体温单（近7日）</text>
          <canvas canvas-id="vitalsChart" id="vitalsChart" class="chart"></canvas>
          <view class="kv" style="margin-top: 8rpx;">
            <text class="k" v-for="v in vitalsData" :key="v.d">{{ v.d }}</text>
            <text class="v" v-for="v in vitalsData" :key="v.d+'v'">{{ v.t }}℃</text>
          </view>
        </view>
        <view class="list-item">
          <view>
            <text class="li-title">检查检验报告</text>
            <text class="li-sub">影像与检验结果汇总</text>
          </view>
          <button class="btn-outline" @tap="openDoc('reports')">{{ expandedDoc==='reports' ? '收起' : '查看' }}</button>
        </view>
        <view v-if="expandedDoc==='reports'" class="doc-detail">
          <text class="mini-title">检验</text>
          <view class="list">
            <view class="list-item" @tap="toggleReport('cbc')">
              <view>
                <text class="li-title">血常规</text>
                <text class="li-sub">WBC 8.1×10^9/L（参考 3.5-9.5）</text>
              </view>
              <view class="pill"><view class="dot" />{{ openReport==='cbc' ? '收起' : '展开' }}</view>
            </view>
            <view v-if="openReport==='cbc'" class="kv">
              <text class="k">RBC</text><text class="v">4.7×10^12/L（3.8-5.8）</text>
              <text class="k">HGB</text><text class="v">142 g/L（120-160）</text>
              <text class="k">PLT</text><text class="v">210×10^9/L（100-300）</text>
              <text class="k">LY%</text><text class="v">28%（20-40）</text>
              <button class="btn-outline" @tap.stop="copyText('血常规：WBC 8.1, RBC 4.7, HGB 142, PLT 210')">复制结果</button>
            </view>
            <view class="list-item" @tap="toggleReport('crp')">
              <view>
                <text class="li-title">CRP</text>
                <text class="li-sub">5 mg/L（参考 0-8）</text>
              </view>
              <view class="pill warn-dot"><view class="dot warn" />{{ openReport==='crp' ? '收起' : '展开' }}</view>
            </view>
            <view v-if="openReport==='crp'" class="kv">
              <text class="k">方法</text><text class="v">免疫比浊法</text>
              <text class="k">临床提示</text><text class="v">轻度增高，结合临床判断</text>
              <button class="btn-outline" @tap.stop="copyText('CRP 5 mg/L，方法：免疫比浊')">复制结果</button>
            </view>
          </view>
          <text class="mini-title">检查</text>
          <view class="list">
            <view class="list-item" @tap="toggleReport('cxr')"><view><text class="li-title">胸片</text><text class="li-sub">未见明确实质性病变</text></view><view class="pill"><view class="dot" />{{ openReport==='cxr' ? '收起' : '影像' }}</view></view>
            <view v-if="openReport==='cxr'" class="paragraph">影像所见：双肺纹理清晰，心影大小形态未见异常，膈肌光滑。</view>
            <view class="list-item" @tap="toggleReport('scope')"><view><text class="li-title">鼻咽镜</text><text class="li-sub">咽部粘膜轻度充血</text></view><view class="pill"><view class="dot" />{{ openReport==='scope' ? '收起' : '详情' }}</view></view>
            <view v-if="openReport==='scope'" class="paragraph">可见咽后壁轻度充血，分泌物稍增多，无溃疡及新生物。</view>
          </view>
        </view>
      </view>
    </view>

    <!-- Bottom Sheet -->
    <view class="overlay" :class="{ show: showSheet }" @tap="onMaskTap">
      <view class="sheet" @tap.stop>
        <view class="drag" />
        <view class="sheet-header">
          <text class="sheet-title">病历详情</text>
          <button class="icon-btn" @tap="closeSheet">✕</button>
        </view>
        <scroll-view class="tabs" scroll-x>
          <view class="tab" :class="{ active: tab==='summary' }" @tap="tab='summary'">病历摘要</view>
          <view class="tab" :class="{ active: tab==='allergy' }" @tap="tab='allergy'">过敏史</view>
          <view class="tab" :class="{ active: tab==='history' }" @tap="tab='history'">既往史</view>
          <view class="tab" :class="{ active: tab==='labs' }" @tap="tab='labs'">检验检查</view>
        </scroll-view>
        <scroll-view class="sheet-body" scroll-y>
          <view v-show="tab==='summary'">
            <text class="mini-title">本次就诊</text>
            <view class="kv space">
              <text class="k">时间</text><text class="v">2025-09-12 10:24</text>
              <text class="k">科室</text><text class="v">呼吸内科</text>
              <text class="k">医生</text><text class="v">刘畅 主治医师</text>
            </view>
            <text class="mini-title">建议与随访</text>
            <text class="paragraph">多饮水，注意休息，避免受凉；若持续发热 ≥38.5℃ 或症状加重，请及时复诊。</text>
          </view>
          <view v-show="tab==='allergy'">
            <view class="list">
              <view class="list-item"><view><text class="li-title">青霉素</text><text class="li-sub">皮疹，呼吸不适 · 严重</text></view></view>
              <view class="list-item"><view><text class="li-title">花粉</text><text class="li-sub">打喷嚏，鼻塞 · 轻度</text></view></view>
            </view>
          </view>
          <view v-show="tab==='history'">
            <view class="list">
              <view class="list-item"><view><text class="li-title">儿童期哮喘史</text><text class="li-sub">无住院史，已缓解</text></view></view>
              <view class="list-item"><view><text class="li-title">慢性鼻炎</text><text class="li-sub">季节性加重</text></view></view>
            </view>
          </view>
          <view v-show="tab==='labs'">
            <view class="list">
              <view class="list-item">
                <view>
                  <text class="li-title">血常规</text>
                  <text class="li-sub">WBC 8.1×10^9/L · 中性粒 62%</text>
                </view>
                <view class="pill"><view class="dot" />正常</view>
              </view>
              <view class="list-item">
                <view>
                  <text class="li-title">CRP</text>
                  <text class="li-sub">5 mg/L</text>
                </view>
                <view class="pill warn-dot"><view class="dot warn" />轻高</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showSheet: false,
      tab: 'summary',
      expandedDoc: '',
      vitalsData: [
        { d: '9/06', t: 37.1 },
        { d: '9/07', t: 36.9 },
        { d: '9/08', t: 36.8 },
        { d: '9/09', t: 36.7 },
        { d: '9/10', t: 36.9 },
        { d: '9/11', t: 36.7 },
        { d: '9/12', t: 36.6 }
      ],
      openReport: '',
      showSearch: false,
      showMenu: false
    }
  },
  methods: {
    openSheet() {
      this.showSheet = true
    },
    openDoc(type) {
      this.expandedDoc = this.expandedDoc === type ? '' : type
      if (this.expandedDoc === 'vitals') {
        this.$nextTick(this.drawVitals)
      }
    },
    toggleSearch() { this.showSearch = !this.showSearch; uni.showToast({ title: this.showSearch ? '打开快捷定位' : '关闭', icon: 'none' }) },
    closeSearch() { this.showSearch = false },
    scrollTo(id) { uni.pageScrollTo({ selector: '#'+id, duration: 250 }); this.showSearch = false; },
    toggleMenu() { this.showMenu = !this.showMenu; uni.showToast({ title: this.showMenu ? '打开菜单' : '关闭菜单', icon: 'none' }) },
    copyPatient() { uni.setClipboardData({ data: '王小明, 男/32岁, 门诊号008132, 过敏: 青霉素', success: ()=> uni.showToast({ title: '已复制', icon:'none' }) }) },
    openAllDocs() { this.expandedDoc = 'home'; this.$nextTick(()=>{ this.expandedDoc='reports' }) },
    closeAllDocs() { this.expandedDoc = '' },
    toggleReport(k) { this.openReport = this.openReport === k ? '' : k },
    copyText(text) { uni.setClipboardData({ data: text, success: () => uni.showToast({ title: '已复制', icon: 'none' }) }) },
    closeSheet() {
      this.showSheet = false
    },
    onMaskTap(e) {
      if (e.target && e.target.classList && e.target.classList.contains('overlay')) {
        this.closeSheet()
      }
    },
    drawVitals() {
      // 使用小程序 2D canvas API 简易绘制折线（非第三方库）
      const ctx = uni.createCanvasContext('vitalsChart', this)
      const w = 650, h = 180
      const pad = 20
      ctx.setFillStyle('#ffffff'); ctx.fillRect(0,0,w,h)
      // 轴
      ctx.setStrokeStyle('#e6e8ee'); ctx.setLineWidth(2)
      ctx.moveTo(pad, h-pad); ctx.lineTo(w-pad, h-pad); ctx.stroke()
      // 数据归一化
      const min = Math.min(...this.vitalsData.map(v=>v.t)) - 0.1
      const max = Math.max(...this.vitalsData.map(v=>v.t)) + 0.1
      const xStep = (w - pad*2) / (this.vitalsData.length - 1)
      // 折线
      ctx.setStrokeStyle('#2a7de1'); ctx.setLineWidth(3)
      this.vitalsData.forEach((v,i)=>{
        const x = pad + i*xStep
        const y = h - pad - (v.t - min) / (max - min) * (h - pad*2)
        if (i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y)
      })
      ctx.stroke()
      // 圆点
      ctx.setFillStyle('#1f63b5')
      this.vitalsData.forEach((v,i)=>{
        const x = pad + i*xStep
        const y = h - pad - (v.t - min) / (max - min) * (h - pad*2)
        ctx.beginPath(); ctx.arc(x,y,3,0,Math.PI*2); ctx.fill()
      })
      ctx.draw()
    },
    noop() {}
  }
}
</script>

<style>
.page { padding: 12px; background: linear-gradient(180deg, #eef3fb, #f8fafc); min-height: 100vh; }
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.title { font-weight: 700; font-size: 34rpx; color: #1a1f36; }
.actions { display: flex; gap: 8px; }
.icon-btn { width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; background: #fff; border: 2rpx solid #e6e8ee; border-radius: 12rpx; color: #667085; }
.icon { font-size: 28rpx; }

.search-panel { background:#fff; border: 2rpx solid #e6e8ee; border-radius: 20rpx; padding: 16rpx; box-shadow: 0 16rpx 48rpx rgba(16,24,40,.08); margin-bottom: 12rpx }
.quick-grid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12rpx }
.q-item { padding: 18rpx; text-align:center; background:#f8fafc; border: 2rpx solid #e6e8ee; border-radius: 14rpx; font-weight:600; color:#1a1f36 }
.q-item.danger { color:#ef4444; border-color:#fecaca; background:#fff5f5 }

.menu-pop { position: absolute; right: 12px; top: 60px; background:#fff; border:2rpx solid #e6e8ee; border-radius: 16rpx; box-shadow: 0 16rpx 48rpx rgba(16,24,40,.12); overflow:hidden; z-index: 9 }
.m-item { padding: 16rpx 22rpx; border-bottom: 2rpx solid #eef1f6 }
.m-item:last-child { border-bottom: 0 }

.card { background: #ffffff; border: 2rpx solid #e6e8ee; border-radius: 28rpx; box-shadow: 0 16rpx 48rpx rgba(16,24,40,0.08); padding: 20rpx; }
.patient-card { display: grid; grid-template-columns: 110rpx 1fr auto; align-items: center; gap: 16rpx; margin-bottom: 12px; }
.avatar { width: 110rpx; height: 110rpx; border-radius: 9999rpx; background: linear-gradient(135deg, #cfe4ff, #a6c8ff); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #1c3f7b; }
.p-info { line-height: 1.3; }
.row { display: flex; align-items: center; gap: 10rpx; }
.p-name { font-weight: 700; font-size: 30rpx; }
.p-sub { color: #667085; font-size: 22rpx; margin-top: 6rpx; display: block; }
.tags { display: flex; gap: 8rpx; flex-wrap: wrap; margin-top: 8rpx; }
.tag { font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 9999rpx; background: #f8fafc; border: 2rpx solid #e6e8ee; color: #475569; }
.pill { display: inline-flex; align-items: center; gap: 8rpx; padding: 8rpx 16rpx; border-radius: 9999rpx; background: #f1f5f9; color: #0f172a; font-weight: 600; font-size: 22rpx; }
.pill .dot { width: 12rpx; height: 12rpx; border-radius: 9999rpx; background: #10b981; }
.warn-dot .dot { background: #f59e0b; }

.btn-primary { padding: 12rpx 20rpx; border-radius: 14rpx; background: linear-gradient(180deg, #2a7de1, #1f63b5); color: #fff; font-weight: 600; box-shadow: 0 12rpx 28rpx rgba(42, 125, 225, 0.28); }
.btn-outline { padding: 12rpx 20rpx; border-radius: 14rpx; background: #fff; border: 2rpx solid #e6e8ee; color: #1a1f36; font-weight: 600; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
.mini-title { font-size: 22rpx; color: #667085; margin-bottom: 10rpx; font-weight: 600; display: block; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8rpx 20rpx; font-size: 24rpx; align-items: center; }
.kv .k { color: #667085; }
.kv .v { font-weight: 700; }
.kv .v.warn { color: #f59e0b; }
.kv.space { margin-bottom: 10rpx; }

.list { display: grid; gap: 12rpx; }
.list-item { display: grid; grid-template-columns: 1fr auto; gap: 12rpx; align-items: center; padding: 16rpx; border: 2rpx solid #e6e8ee; border-radius: 18rpx; }
.li-title { font-weight: 700; font-size: 28rpx; display: block; }
.li-sub { color: #667085; font-size: 22rpx; display: block; margin-top: 4rpx; }
.footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; margin-top: 14rpx; }

.doc-detail { margin: 10rpx 0 0; padding: 14rpx; border: 2rpx solid #e6e8ee; border-radius: 18rpx; background: #fff; }
.chart { width: 650rpx; height: 360rpx; background:#fff; border: 2rpx solid #e6e8ee; border-radius: 12rpx }

/* Bottom Sheet */
.overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.45); display: none; align-items: flex-end; z-index: 99; }
.overlay.show { display: flex; }
.sheet { width: 100%; background: #fff; border-top-left-radius: 24rpx; border-top-right-radius: 24rpx; box-shadow: 0 -24rpx 60rpx rgba(2,6,23,0.28); max-height: 74vh; animation: slideUp .22s ease-out; }
@keyframes slideUp { from { transform: translateY(20rpx); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.drag { width: 120rpx; height: 10rpx; background: #e2e8f0; border-radius: 9999rpx; margin: 16rpx auto; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16rpx 20rpx; border-top-left-radius: 24rpx; border-top-right-radius: 24rpx; border-bottom: 2rpx solid #e6e8ee; position: sticky; top: 0; background: #fff; z-index: 1; }
.sheet-title { font-weight: 700; font-size: 28rpx; }
.tabs { display: flex; gap: 12rpx; padding: 12rpx 20rpx; border-bottom: 2rpx solid #e6e8ee; white-space: nowrap; }
.tab { padding: 10rpx 18rpx; border-radius: 16rpx; background: #f1f5f9; font-size: 22rpx; font-weight: 600; color: #334155; }
.tab.active { background: rgba(42,125,225,0.12); color: #2a7de1; }
.sheet-body { padding: 16rpx 20rpx 26rpx; max-height: 60vh; }
.paragraph { font-size: 24rpx; line-height: 1.6; color: #0f172a; display: block; margin-top: 6rpx; }
</style>


